<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0px;
        }

        .container {
            width: 500px;
            height: 600px;
            background: #000;
            margin: 100px auto;
            position: relative;
            overflow: hidden;
        }

        .plane {
            width: 80px;
            height: 60px;
            background: url(img/plane.png) no-repeat center / 100% 100%;
            position: absolute;
            bottom: 10px;
            left: calc(50% - 40px);
        }

        .hater {
            width: 60px;
            height: 40px;
            background: url(img/plane.png) no-repeat center / 100% 100%;
            position: absolute;
            top: 0px;
        }



        .bullet {
            height: 20px;
            width: 10px;
            border-radius: 50% 50% 0 0;
            box-shadow: 0px 5px 5px #ffffff;
            background: gold;
            position: absolute;
        }
    </style>
</head>

<body>
    <audio src="audio/hdl.m4a" id="player"></audio>
    <h1>得分:
        <span id="score" style="color:red">0</span>
    </h1>
    <div class="container">
        <div class="plane"></div>
    </div>

    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <script>
        var player = document.getElementById("player")

        setTimeout(() => {
            player.play()
        }, 1000);

        //敌机出生的频率
        var hater_create_interval = 800
        //敌机下落的频率
        var hater_fly_interval = 100
        //敌机每次下落的高度
        var hater_fly_step = 5
        //子弹发射的频率
        var bullet_interval = 300
        //子弹飞行速度
        var bullet_fly_interval = 50
        //游戏状态
        var game_isplaying = true
        //得分
        var score = 0

        // 获取最终位置，防止出画面
        var calcPostion = (left, top, maxLeft, maxTop, minLeft = 0, minTop = 0) => {
            if (left < minLeft) left = minLeft
            else if (left > maxLeft) left = maxLeft
            if (top < minTop) top = minTop
            else if (top > maxTop) top = maxTop
            return {
                left, top
            }
        }

        //键盘按下
        $(window).keydown(function (e) {
            if (!game_isplaying) return false
            // console.log(e.keyCode)
            // console.log($(".plane").position().top, $(".plane").offset().top)
            var t = $(".plane").position().top
            var l = $(".plane").position().left
            switch (e.keyCode) {
                case 87:
                    t -= 10
                    break
                case 83:
                    t += 10
                    break
                case 65:
                    l -= 10
                    break
                case 68:
                    l += 10
                    break
                case 74:
                    shoot()
                    break
                case 13:
                    game_isplaying = true
                    break
            }

            var maxLeft = $(".container").innerWidth() - $(".plane").innerWidth()
            var maxTop = $(".container").innerHeight() - $(".plane").innerHeight()
            //计算真正位置，不允许出画面
            var position = calcPostion(l, t, maxLeft, maxTop)

            $(".plane").css({
                "left": position.left,
                "top": position.top
            })
        })

        var endTime = new Date()

        //发射子弹
        var shoot = () => {
            //控制发射间隔
            if (new Date() - endTime < bullet_interval) return false

            var top = $(".plane").position().top - 20
            var bullet = $("<div/>").addClass("bullet").css("top", top)
            //一定要先append才能获取到innerwidth
            $(".container").append(bullet)
            //让子弹出现在飞机中间位置，如果要简单点可以直接写数值
            var left = $(".plane").position().left + $(".plane").innerWidth() / 2 - bullet.innerWidth() / 2
            bullet.css("left", left)

            endTime = new Date()
        }

        //让子弹飞
        var bullet_timer = setInterval(() => {
            $(".bullet").each(function () {
                var bullet = $(this)
                bullet.css("top", bullet.position().top - 10)
                if (bullet.position().top < 0) {
                    bullet.remove()
                }
            })
        }, bullet_fly_interval);

        // //敌机下落
        var hater_timer = setInterval(() => {
            $(".hater").each(function () {
                var hater = $(this)

                hater.css("top", hater.position().top + hater_fly_step)
                if (hater.position().top > $(".container").innerHeight()) {
                    hater.remove()
                }
            })
        }, hater_fly_interval);

        //生成敌机的定时器
        var create_hater_timer = setInterval(() => {
            var hater = $("<div/>").addClass("hater").css("top", 0)
            $(".container").append(hater)
            var left = Math.round(Math.random() * ($(".container").innerWidth() - $('.hater').innerWidth()))
            hater.css("left", left)

        }, hater_create_interval);

        //简化DOM节点的上下左右
        var getDomTRBL = (dom) => {
            var result = {}
            result.left = dom.offsetLeft
            result.right = dom.offsetLeft + dom.offsetWidth
            result.top = dom.offsetTop
            result.bottom = dom.offsetTop + dom.offsetHeight
            return result
        }

        //判断碰撞
        var checkCollision = (a, b) => {
            a = getDomTRBL(a)
            b = getDomTRBL(b)
            if (a.left >= b.left && a.left <= b.right && a.top >= b.top && a.top <= b.bottom) {
                return true
            } else if (a.left >= b.left && a.left <= b.right && a.bottom >= b.top && a.bottom <= b.bottom) {
                return true
            } else if (a.right >= b.left && a.right <= b.right && a.bottom >= b.top && a.bottom <= b.bottom) {
                return true
            } else if (a.right >= b.left && a.right <= b.right && a.top >= b.top && a.top <= b.bottom) {
                return true
            }

            return false
        }

        // console.log($(".plane").get())  jq对象转js对象

        //判断碰撞
        var check_collision_timer = setInterval(() => {

            var plane = $(".plane").get(0)
            $(".hater").each(function (i, hater) {
                //判断敌机和我的碰撞
                if (checkCollision(plane, hater) || checkCollision(hater, plane)) {
                    console.log("撞了")
                    stopGame()
                }

                //判断子弹和敌机的碰撞
                $(".bullet").each(function (i, bullet) {
                    if (checkCollision(hater, bullet) || checkCollision(bullet, hater)) {
                        hater.remove()
                        bullet.remove()
                        score += 10
                        $("#score").text(score)
                    }
                })
            })

        }, 50)

        //提升难度定时器
        var set_level_timer = setInterval(() => {
            //难度简单设置，分数高，变快
            if (score > 0 && score % 50 === 0) hater_fly_step += 5
        }, 1000);

        //停止游戏
        var stopGame = () => {
            clearInterval(create_hater_timer)
            clearInterval(hater_timer)
            clearInterval(bullet_timer)
            clearInterval(check_collision_timer)
            clearInterval(set_level_timer)
            game_isplaying = false
        }

    </script>

</body>

</html>